<template>
	<view class="custom_vertical_list_default_imgnews">
		<view class="custom_vertical_list_default_imgnews_panel" :class="$isArray(item.content.img) ? 'imglist' : item.content.aside.isMaxImg ? 'maximg' : ''">
			<view class="custom_vertical_list_default_imgnews_panel_left">
				<navigator :url="'pages/group-news-view?id=' + item.group.groupId + '&contentId=' + item.content.contentId">
					<view class="custom_vertical_list_default_imgnews_panel_left_content">{{ item.content.text }}</view>
				</navigator>
				<view class="custom_vertical_list_default_imgnews_panel_left_aside">
					<view class="custom_vertical_list_default_imgnews_panel_left_aside_soure">
						<navigator :url="'pages/group-view?id=' + item.group.groupId">{{ item.group.title }}</navigator>
					</view>
					<view class="custom_vertical_list_default_imgnews_panel_left_aside_left">
						<navigator
							:url="'pages/comment-view?id=' + item.group.groupId + '&contentId=' + item.content.contentId + '&commentId=' + item.content.aside.comment.commentId"
							v-if="!item.content.aside.isComment"
						>
							评论{{ fixNumber(item.content.aside.comment.commentCount) }}
						</navigator>
					</view>
					<view class="custom_vertical_list_default_imgnews_panel_left_aside_right">{{ fixTime(item.content.aside.time) }}</view>
				</view>
			</view>
			<view class="custom_vertical_list_default_imgnews_panel_right">
				<navigator
					:url="'pages/group-news-view?id=' + item.group.groupId + '&contentId=' + item.content.contentId"
					v-if="$isArray(item.content.img)"
					style="width:100%;display:flex"
				>
					<!-- #ifdef MP-WEIXIN -->
					<view class="custom_vertical_list_default_imgnews_panel_right_img" wx:for="(img, gindex) in item.content.img" wx:key="'itemContentImg_' + gindex">
						<image style="width: 100%;height: 160rpx;border-radius: 10rpx;" :src="img" lazy-load="true" mode="aspectFit"></image>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="custom_vertical_list_default_imgnews_panel_right_img" v-for="(img, gindex) in item.content.img" :key="'itemContentImg_' + gindex">
						<image style="width: 100%;height: 160rpx;border-radius: 10rpx;" :src="img" lazy-load="true" mode="aspectFit"></image>
					</view>
					<!-- #endif -->
				</navigator>
				<navigator :url="'pages/group-news-view?id=' + item.group.groupId + '&contentId=' + item.content.contentId" v-else>
					<view class="custom_vertical_list_default_imgnews_panel_right_img" v-if="item.content.aside.isMaxImg">
						<image style="width: 100%;height: 360rpx;border-radius: 10rpx;" :src="item.content.img" lazy-load="true" mode="aspectFit"></image>
					</view>
					<view class="custom_vertical_list_default_imgnews_panel_right_img" v-else>
						<image style="width: 270rpx;height: 160rpx;border-radius: 10rpx;" :src="item.content.img" lazy-load="true" mode="aspectFit"></image>
					</view>
				</navigator>
			</view>
		</view>
		<view class="custom_vertical_list_default_imgnews_panel_tools" v-if="item.content.aside.isComment">
			<view class="custom_vertical_list_default_imgnews_panel_tools_left">
				<custom-vertical-list-button-share :item="item" :toolsText="toolsText[0]" v-if="!isBrowser"></custom-vertical-list-button-share>
				<!-- <button type="default" @click="share(item.content.contentId)" style="width: 100rpx;height: 50rpx;font-size: 24rpx;padding:0;line-height: 50rpx;" v-if="!isBrowser">
					{{ toolsText[0] }}
				</button> -->
				<custom-vertical-list-button-comment :item="item" :toolsText="toolsText[1]"></custom-vertical-list-button-comment>
				<!-- <button type="default" @click="comment(item.content.contentId)" style="width: 140rpx;height: 50rpx;font-size: 24rpx;padding:0;line-height: 50rpx;">
					{{ toolsText[1] }} {{ fixNumber(item.content.aside.comment.commentCount) }}
				</button> -->
				<custom-vertical-list-button-support :item="item" :toolsText="toolsText[2]"></custom-vertical-list-button-support>
				<!-- <button
					type="default"
					@click="support(item.content.contentId)"
					style="width: 140rpx;height: 50rpx;font-size: 24rpx;padding:0;line-height: 50rpx;"
					:class="item.content.aside.support.isSupport ? 'on' : ''"
				>
					{{ toolsText[2] }} {{ fixNumber(item.content.aside.support.supportCount) }}
				</button> -->
			</view>
			<view class="custom_vertical_list_default_imgnews_panel_tools_right"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'custom-vertical-list-default-imgnews',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		isBrowser: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	data() {
		return {
			toolsText: ['分享', '评论', '点赞']
		};
	},
	methods: {
		fixTime(t) {
			return this.$timeago(new Date(t).getTime());
		},
		fixNumber(t) {
			return this.$plugins.fixNumber(t, 100);
		}
	}
};
</script>

<style lang="less">
@percentage: 1%;
.custom_vertical_list_default_imgnews {
	border-bottom: 2rpx solid #efefef;
	padding: 20rpx 0;
	.custom_vertical_list_default_imgnews_panel {
		display: flex;
		&.imglist {
			display: block;
			.custom_vertical_list_default_imgnews_panel_left {
				.custom_vertical_list_default_imgnews_panel_left_content {
					min-height: auto;
				}
				.custom_vertical_list_default_imgnews_panel_left_aside {
					padding: 20rpx 0;
				}
			}
			.custom_vertical_list_default_imgnews_panel_right {
				margin: 0;
				uni-navigator {
					display: flex;
				}
				.custom_vertical_list_default_imgnews_panel_right_img {
					width: 100/3 / @percentage;
					margin: 0 10rpx;
					&:first-child {
						margin: 0;
					}
					&:last-child {
						margin: 0;
					}
					uni-image {
						width: 100%;
					}
				}
			}
		}
		&.maximg {
			display: block;
			.custom_vertical_list_default_imgnews_panel_left {
				.custom_vertical_list_default_imgnews_panel_left_content {
					min-height: auto;
				}
				.custom_vertical_list_default_imgnews_panel_left_aside {
					padding: 20rpx 0;
				}
			}
			.custom_vertical_list_default_imgnews_panel_right {
				margin: 0;
				uni-navigator {
					display: flex;
				}
				.custom_vertical_list_default_imgnews_panel_right_img {
					width: 100%;
					background-color: #999999;
					uni-image {
						width: 100%;
					}
				}
			}
		}
		.custom_vertical_list_default_imgnews_panel_left {
			text-align: left;
			.custom_vertical_list_default_imgnews_panel_left_content {
				font-size: 26rpx;
				min-height: 135rpx;
			}
			.custom_vertical_list_default_imgnews_panel_left_aside {
				font-size: 20rpx;
				color: #999999;
				display: flex;
				.custom_vertical_list_default_imgnews_panel_left_aside_soure {
					margin: 0 10rpx 0 0;
				}
				.custom_vertical_list_default_imgnews_panel_left_aside_left {
					uni-navigator {
						margin: 0 10rpx 0 0;
					}
				}
				.custom_vertical_list_default_imgnews_panel_left_aside_right {
				}
			}
		}
		.custom_vertical_list_default_imgnews_panel_right {
			margin: 0 0 0 10rpx;
		}
	}
	.custom_vertical_list_default_imgnews_panel_tools {
		display: flex;
		padding: 20rpx 0 0;
		.custom_vertical_list_default_imgnews_panel_tools_left {
			width: 50%;
			display: flex;
		}
		.custom_vertical_list_default_imgnews_panel_tools_right {
			width: 30%;
		}
	}
}
</style>
